<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        {{ msg }}
        <ul>
            <li v-for="(item, idx) in listData" :key="idx">
                编号：{{ item.id }} -
                名称：{{ item.name }} -
                价格：{{ item.price }} -
                数量：<button @click="del(idx)" v-if="item.num>1">-</button>{{ item.num }}<button @click="add(idx)" v-if="item.num!==item.stock">+</button> -
                剩余：{{ item.stock - item.num }} -
                <button @click="remove(idx)">x</button>
            </li>
        </ul>
        选中 + 全选功能<br>
        计算总价<br>
        计算总数量<br>
    </div>
</body>
<script src="./libs/vue.min.js"></script>
<script>
    new Vue({
        el: ".app",
        data(){
            return {
                msg: "hello",
                listData:[{
                    msg:"手机",
                    id: "001",
                    price:356,
                    num:6,
                    stock:10
                },{
                    msg:"电脑",
                    id: "002",
                    price:2899,
                    num:6,
                    stock:200
                },{
                    msg:"自行车",
                    id: "003",
                    price:677,
                    num:3,
                    stock:99
                }]
            }
        },
        methods: {
            del(i){
                this.listData[i].num--
            },
            add(i){
                this.listData[i].num++;
            },
            remove(i){
                this.listData.splice(i, 1);
            }
        }
    })
</script>
</html>